<template>
  <div class="home">
    <van-search placeholder="小葵花学堂" @click="jump" />
    <van-notice-bar
      left-icon="volume-o"
      scrollable
      text="小葵花学堂开课了!!!"
    />
    <hr />
    <van-tabs swipeable animated>
      <van-tab class="my-swipe1_box" title="个性推荐">
        <van-swipe
          class="my-swipe"
          id="my-swipe1"
          :autoplay="3000"
          indicator-color="white"
        >
          <van-swipe-item
            ><img src="../assets/image/x04.jpg" alt=""
          /></van-swipe-item>
        </van-swipe>
        <div id="home-hotnews">
          <div id="fire-box">
            <van-icon class="fire-ico" name="fire" />
            <h3>今日热门</h3>
          </div>
          <div id="home-news">
            <ul id="new_ul">
              <li><b>-</b> 孩子咳嗽老不好，多半是肺热</li>
              <li><b>-</b> 用葵花牌小儿肺热咳喘口服液,清肺热,治疗反复咳嗽!</li>
            </ul>
          </div>
        </div>
        <div id="home-select">
          <ul>
            <li v-for="(item,index) in textList" :key='item.id'>
              <div id="home-select-box" @click="article_jump(item.id)">
                <h3>#{{index+1}}{{item.tit.substr(0,7)}}...</h3>
                <p>用葵花牌小儿肺热咳喘口服液,清肺热,<br />治疗反复咳嗽!</p>
              </div>
              <img src="../assets/image/x07.jpg" alt="" />
            </li>
            
          </ul>
          <div id="home-plate">
            <div class="plate-color">
              <van-icon class="paper1-ico" name="newspaper-o" />
              <h3>其他板块1</h3>
            </div>
          </div>
          <div id="home-Courseadvice">
            <van-swipe :loop="false" :width="163" :show-indicators="false">
              <van-swipe-item class="home-sw-item"
                ><img src="../assets/image/kuihua1.jpeg" alt="" />
                <p>小葵花学堂</p>
                <i>1w+人学习</i>
                <van-rate class="xingx-ico" v-model="value" readonly />
              </van-swipe-item>
              <van-swipe-item class="home-sw-item">
                <img src="../assets/image/kuihua1.jpeg" alt="" />
                <p>小葵花学堂</p>
                <i>1w+人学习</i>
                <van-rate class="xingx-ico" v-model="value" readonly />
              </van-swipe-item>
              <van-swipe-item class="home-sw-item"
                ><img src="../assets/image/kuihua1.jpeg" alt="" />
                <p>小葵花学堂</p>
                <i>1w+人学习</i>
                <van-rate class="xingx-ico" v-model="value" readonly />
              </van-swipe-item>
              <van-swipe-item class="home-sw-item"
                ><img src="../assets/image/kuihua1.jpeg" alt="" />
                <p>小葵花学堂</p>
                <i>1w+人学习</i>
                <van-rate class="xingx-ico" v-model="value" readonly />
              </van-swipe-item>
            </van-swipe>
          </div>
          <div id="Finallesson">
            <img src="../assets/image/ia_100001624.jpg" alt="" />
            <div class="last-advice">
              <h2>最后的推荐</h2>
              <b>小葵花课堂 共1节</b>
              <p>葵花课堂,一节更比三节强👍</p>
            </div>
          </div>
        </div>
      </van-tab>
      <van-tab title="课程" class="home_course">
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
          <van-swipe-item
            ><img src="../assets/image/x03.jpg" alt=""
          /></van-swipe-item>
          <van-swipe-item
            ><img src="../assets/image/x04.jpg" alt=""
          /></van-swipe-item>
        </van-swipe>

        <!-- <router-link :to="'/course'">111</router-link> -->
        <!-- <router-view class="main" name="course"></router-view> -->
        <course></course>
      </van-tab>
      <van-tab title="微专业">
        <!-- <router-view class="main" name="zhuanye"></router-view> -->
        <zhunaye></zhunaye>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import { Toast } from "vant";
import course from "../views/course/course.vue";
import zhunaye from "../views/course/zhuanye.vue";
import {get} from "../tools/request";
export default {
  data() {
    return {
      // active: 2,
      value: 4,
      textList:'',
    };
  },
  methods: {
    jump() {
      this.$router.push({ name: "search" });
    },
    article_jump(id) {
      this.$router.push({ name: "article",query:{id} });
    }
  },
  components: {
    course,
    zhunaye,
  },
  created() {
    this.$store.commit("tabShow");
    console.log(this.$route)
  },
  mounted(){
    get('/api/l1/Text').then(r=>{
      this.textList=r.data.splice(0,3)
    })

  }
  
  
};
</script>
<style lang="scss" scoped>
.home {
  background: #f2f4f8;
  #home-search {
    height: 30px;
    width: 347px;
    border: 1px solid #000;
    border-radius: 25px;
    input {
      width: 280px;
    }
  }
  .my-swipe1_box {
    overflow: hidden;
    #my-swipe1 {
      width: 98%;
      padding: 5px 10px;
      img {
        max-width: 100%;
      }
    }
  }

  #home-hotnews {
    height: 128px;
    width: 100%;
    background: #fff;
    #fire-box {
      width: 120px;
      margin-top: 20px;
      padding: 5px;
      margin-left: 20px;
      border: 1px solid red;
      border-radius: 5px;
      box-shadow: 3px 3px 6px #ff8282;
      .fire-ico {
        color: red;
        font-size: 25px;
      }
      h3 {
        font-family: DS-Digital-Bold, serif;
        margin-top: 5px;
        display: inline-block;
      }
    }
    #home-news {
      margin-top: 30px;
      #new_ul {
        li {
          width: 70vw;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          list-style: disc;
          margin-left: 20px;
          line-height: 20px;
          b {
            font-weight: 900;
          }
        }
      }
    }
  }
  #home-select {
    margin: 10px 10px;
    // margin-top: 10px;
    ul {
      li {
        border: 1px solid #cecece;
        border-radius: 7px;
        display: flex;
        width: 100%;
        justify-content: space-around;
        white-space: nowrap;
        background-color: #fff;
        margin-top: 5px;
        overflow: hidden;
        #home-select-box {
          line-height: 30px;
          h3 {
            margin-top: 10px;
            font-size: 15px;
            margin-left: 10px;
            // font-weight: normal;
          }
          p {
            font-size: 12px;
            margin-left: 10px;
            color: #999;
          }
        }

        img {
          margin-top: 5px;
          margin-bottom: 5px;
          height: 95px;
          width: 95px;
          // object-fit: none;
        }
      }
    }
  }
  #home-plate {
    margin-top: 10px;
    margin-left: 10px;
    display: flex;
    .plate-color {
      display: flex;
      border: 1px solid #39a9ed;
      border-radius: 5px;
      padding: 5px 5px;
      box-shadow: 3px 3px 6px #acd7f4;
      h3 {
        font-family: DS-Digital-Bold, serif;
      }
    }
    .paper1-ico {
      font-size: 30px;
      color: #39a9ed;
      padding-right: 5px;
    }
  }
  #home-Courseadvice {
    margin: 10px 5px;
    text-align: center;
    img {
      max-height: 80%;
      max-width: 80%;
      border-bottom: #39a9ed 1px solid;
    }
    i {
      font-size: 12px;
      text-decoration: none;
      color: #333;
      font-style: normal;
    }
    .home-sw-item {
      background: #fff;
      margin-top: 10px;
      margin-right: 10px;
      padding: 5px;
      border-radius: 5px;
      border: 1px solid #cecece;
      padding-bottom: 10px;
    }
  }
  #Finallesson {
    width: 100%;
    height: 500px;
    background: #fff;
    padding-bottom: 10px;
    padding: 10px;
    img {
      margin-top: 20px;
      margin: 10px auto;
    }
    .last-advice {
      // border-bottom: 1px solid #cecece;
      line-height: 40px;
    }
  }
}
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
  background-color: #39a9ed;
  height: 202px;
  img {
    max-width: 100%;
  }
}
</style>
